<template>
  <div class="container">
    <el-row class="show-item">
      <el-form :model="active.item" label-width="80px" v-if="active.item?.id">
        <el-form-item label="Url">
          <div>{{ active.item.uri }}</div>
        </el-form-item>
        <!-- <el-form-item label="备注">
          <div>{{ active.item.uri }}</div>
        </el-form-item> -->
        <el-form-item label="" v-if="active.item.status == 'END'">
          <el-button link type="primary" @click="handleExport"
            ><el-icon class="el-icon--right"></el-icon>下载脚本拆解（Download
            Script）</el-button
          >
          <el-button
            link
            type="primary"
            @click="handleDownloadMp4"
            v-if="!!active.item.mp4Path"
            ><el-icon class="el-icon--right"></el-icon>下载原视频（Download
            Video）</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <el-row class="line-body">
      <el-col :span="12" v-if="active.item.status">
        <div v-if="active.item.status != 'END'">
          <el-text class="mx-1" :type="tagType[active.item.status].type">
            {{ showErrorMsg() }}</el-text
          >
        </div>
        <div v-else>
          <div v-if="active.timeLine.length < 1">{{ active.item.content }}</div>
          <div v-else>
            <el-timeline>
              <el-timeline-item
                color="#0bbd87"
                placement="top"
                timestamp="原语言（Original Language）"
                >{{ active.source_language }}</el-timeline-item
              >
              <el-timeline-item
                v-for="(line, index) in active.timeLine"
                type="primary"
                :key="index"
                :hollow="true"
                placement="top"
                :timestamp="line.start_time + '~' + line.end_time"
              >
                <el-descriptions
                  title=""
                  direction="vertical"
                  :column="4"
                  border
                >
                  <el-descriptions-item :label="line.original_text">{{
                    line.translated_text
                  }}</el-descriptions-item>
                </el-descriptions>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>
<script setup>
import { onMounted, reactive, watch } from "vue";
import { getAnalysisItem, downloadAnalysis } from "../api/videoAnalysis";
const tagType = {
  START: { type: "info", title: "排队中" },
  DOWNLOADING: { type: "primary", title: "下载中" },
  DOWNLOAD: { type: "primary", title: "数据初始化" },
  EXTRACT: { type: "warning", title: "AI解析中" },
  END: { type: "success", title: "完成" },
  ERROR: { type: "danger", title: "Error" },
};
const props = defineProps(["data"]);
const active = reactive({
  item: props.data || {},
  timeLine: [],
  source_language: "",
  message: "",
  type: "TEXT",
  Loading: false,
});

const showErrorMsg = () => {
  if (active.item.status == "ERROR") {
    if (active.item.errmsg == "DOWNLOAD_ERROR") {
      return "视频下载失败，请前往原网站下载视频文件，然后上传至本平台进行解析。";
    }
    return active.item.errmsg;
  }
  return tagType[active.item.status].title;
};

watch(
  () => props.data,
  (next, prev) => {
    active.item = next;
    setTimeLine();
  },
  { deep: true }
);
const getImages = () => {
  if (active.item.loadImages) {
    return;
  }
  active.Loading = true;
  getAnalysisItem(active.item.id).then((json) => {
    active.Loading = false;
    const { data } = json;
    const { videoImages } = data;
    active.item.loadImages = true;
    active.item.videoImages = videoImages;
  });
};
const setTimeLine = () => {
  const { content, status } = active.item;
  active.timeLine = [];
  active.source_language = "";
  if (status != "END") return;
  getImages();
  try {
    const json = JSON.parse(content);
    if (json.transcription) {
      setTimeLineItem(json.transcription);
    } else {
      setTimeLineItem(json);
    }
  } catch (e) {}
};
const setTimeLineItem = (json) => {
  if (json.source_language) {
    active.source_language = json.source_language;
    active.timeLine = json.transcriptions;
  }
};
if (process.client) {
  onMounted(() => {
    setTimeLine();
  });
}

const handleExport = () => {
  downloadAnalysis(active.item.id);
};

const handleDownloadMp4 = () => {
  const mp4Path = active.item.mp4Path;
  window.open(mp4Path, "_blank"); // 替换为你的目标网址
};
</script>
<style lang="scss">
.show-item {
  background-color: var(--el-menu-bg-color);
  border-bottom: 1px solid var(--el-menu-border-color);
}

.line-body {
  margin: 20px;
}
</style>